<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <button @click="btn1Click">按钮1</button>
  <button v-on:click="btn2Click(123)">按钮2</button>
  <!--在事件定义时，写函时省略了小括号，但是方法本身是需要一个参数的，这个时候
  Vue会默认将浏览器生产的event事件对象作为参数传入到方法，-->
  <button @click="btn2Click">按钮3</button>
  <!--手动获取事件参数用：$event-->
  <button @click="btn3Click(123,$event)">按钮4</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    },
    methods: {
      btn1Click(){
        console.log('点击了按钮1')
      },
      btn2Click(event){
        console.log('-------',event)
      },
      btn3Click(abc,event){
        console.log('++++',abc,'-----',event)
      }
    }

  })

</script>
</body>
</html>